<<<<<<< HEAD
 body {
    height:1200px;
    /* 防止页面缩放 */
    overflow-x: hidden; /* 禁止水平滚动 */
    overflow-y: auto; /* 允许垂直滚动 */
    font-family: Arial, sans-serif;
    background-color: #100c2a;
}
.top-header {
    width: 100%;
    height: auto;
    /* 其他样式 */
}
/* CSS */
h1 {
    text-align: center;
    color: #fff;
    margin: 0;
=======
body {
    margin: 0;
    padding: 0;
    font-family: Arial, sans-serif;
    height: 100%; /* 固定高度为1300px */
    position: relative; /* 添加相对定位 */
    overflow-x: hidden; /* 禁止水平滚动条 */
    overflow: hidden; /* 禁止滚动 */
}
.background {
    position: absolute; /* 使用绝对定位 */
    bottom: 0;
    left: 0;
    height: 100%; /* 自适应高度 */
    z-index: -1; /* 确保背景图像位于其他内容之后 */
}
.top-header{
     position: absolute;
     top:1%;
     left:29%;
}
.map {
	position: relative;
	height: 1200px;
	display: flex;
	justify-content: center;
	align-items: center;
	z-index:-1;
	top:-150px;
}

.map img {
    width:400px;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	max-width: 100%;
	max-height: 100%;
	z-index:-1;
}

@font-face {
    font-family: 'CustomFont'; /* 自定义字体的名称 */
    src: url('simhei.ttf') format('truetype'); /* 字体文件的路径和格式 */
}

h1 {
    font-family: 'CustomFont', Arial, sans-serif; /* 使用自定义字体，如果不可用则使用备选字体 */
    text-align: left;
    color: #fff;
    margin: 0;
    font-size:32px;
>>>>>>> d8a2f36 (first commit)
    position: absolute; /* 使用绝对定位，以便于它们之间的相互位置调整 */
    left: 50%; /* 设置left属性为50%，使元素居中 */
    top: 10px; /* 根据需要调整top属性，使元素位于页面的顶部 */
    transform: translateX(-50%); /* 通过transform属性调整元素位置 */
}

<<<<<<< HEAD
.chart-map, .chart-bar, .chart-line, .chart-pie {
    border: 2px solid #fff; /* 保持边框颜色 */
    border-radius: 18px; /* 添加边框半径，使边框更加圆滑 */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* 添加阴影，增加立体感 */
    position: absolute; /* 使用绝对定位，以便于它们之间的相互位置调整 */
    padding: 10px; /* 添加内边距，增加内部空间 */
    overflow: hidden; /* 防止内容溢出 */
}
.chart-map {
    border: 2px white solid;
    position: relative; /* 确保 .chart-pie 相对于 .chart-map 进行定位 */
    display: flex;
    justify-content: center;
    top: 20px; /* 调整顶部位置，避免与标题重叠 */
    left: 460px; /* 左侧与 .chart-pie 对齐 */
    width: 600px;
    height: 400px;
}

.chart-pie {
    border: 2px white solid;
    position: absolute;
    top: 140px; /* 向上移动20像素 */
    left: 30px; /* 左侧与 .chart-map 对齐 */
    height: 400px
}

.image-title {
    color: white; /* 文本颜色 */
    text-align: center; /* 文本居中 */
    font-size: 1.5em; /* 文本字体大小 */
    font-weight: bold; /* 文本加粗 */
}

.date-component {
    text-align: center; /* 日期居中显示 */

    color: white; /* 日期颜色 */
    margin-bottom: 20px; /* 日期组件与上方图表的间距 */

}

#current-date {
    font-family: Arial, sans-serif; /* 日期和时间字体 */
    font-size: 1.2em; /* 日期和时间字体大小 */
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5); /* 添加文字阴影*/
}


=======

#current-date {
    font-family: 'CustomFont', Arial, sans-serif;
    position: absolute;
    top:6.5%;
    left:78%;
    font-family: Arial, sans-serif; /* 使用合适的字体 */
    font-size: 30px;
    color: #c5ccff;
    border-radius: 5px; /* 添加圆角 */
    box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3); /* 添加阴影 */
}

.chart-line {
    position: absolute;
    top: 69%;
    left: -22%;
    display: flex;
    align-items: center;
    justify-content: center;
}
.line-title{
    font-family: 'CustomFont', Arial, sans-serif;
    position:relative;
    top:-232px;
    left:50%;
    font-size:24px;
    color:#ffeb7b;
}
.line-box{
    position:absolute;
    top:-16%;
    right:18.5%;
    z-index:-1;
}


.chart-bar{
    position: absolute;
    top:69%;
    left: 36%;
    display: flex;
    align-items: center;
    justify-content: center;
}
.bar-title{
    font-family: 'CustomFont', Arial, sans-serif;
    width:300px;
    position:relative;
    top:-232px;
    left:56%;
    font-size:24px;
    color:#ffeb7b;
}
.bar-box{
    position:absolute;
    top:-16%;
    left:46%;
    z-index:-1;
}


.chart-map {
    position: absolute;
	top: 40%;
	left: 52%;
	transform: translate(-50%, -50%);
	max-width: 100%;
	max-height: 100%;
	z-index:999;
}
.map-title{
    font-family: 'CustomFont', Arial, sans-serif;
    position:relative;
    top:-30px;
    left:300px;
    font-size:24px;
    color:#ffeb7b;
}

.chart-pie {
    position: absolute;
    left:71%;
    top:28%;
}
.pie-title{
    font-family: 'CustomFont', Arial, sans-serif;
    position:relative;
    left:25%;
    font-size:24px;
    color:#ffeb7b;
}
.pie-box{
    position:absolute;
    top:-2%;
    left:7%;
}

.line{
    content:"";
    position:absolute;
    right:-30px;
    width:600px;
    border-top:2px solid lightblue;
}
.line3{
    content:"";
    position:absolute;
    top:520px;
    right:-30px;
    width:550px;
    border-top:2px solid lightblue;
    z-index:-1;
}
.line2{
    content:"";
    position:absolute;
    top:300px;
    right:-30px;
    width:600px;
    border-top:2px solid lightblue;
}
.line4{
    content:"";
    position:absolute;
    top:820px;
    width:600px;
    border-top:2px solid lightblue;
}
.carousel-title{
    font-family: 'CustomFont', Arial, sans-serif;
    color:#ffeb7b;
    width:200px;
    position:absolute;
    top:520px;
    right:-30px;
    width:420px;
    z-index:-1;
}
.border-bg{
    position:absolute;
    top:8%;
    left:73%;
    z-index:-1;
}
>>>>>>> d8a2f36 (first commit)
